<template>
  <div class="terms-container">
    <el-checkbox v-model="checked" @change="handleChange">
      <div class="terms-content">
        <span class="terms-text">我已阅读并同意</span>
        <el-button link type="primary" class="terms-link" @click.prevent="showTerms">
          《用户协议》
        </el-button>
        <span class="terms-text">和</span>
        <el-button link type="primary" class="terms-link" @click.prevent="showPrivacyPolicy">
          《隐私政策》
        </el-button>
      </div>
    </el-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import type { CheckboxValueType } from 'element-plus';
import { WEBSITE_NAME } from '@/constants';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const checked = ref(props.modelValue);

// 监听复选框变化
const handleChange = (val: CheckboxValueType) => {
  const boolVal = Boolean(val);
  emit('update:modelValue', boolVal);
  emit('change', boolVal);
};

// 监听props变化
watch(
  () => props.modelValue,
  newVal => {
    checked.value = newVal;
  }
);

// 显示用户协议
const showTerms = () => {
  ElMessageBox.alert(
    `
    <div class="terms-dialog-content">
      <h3>用户协议</h3>
      <p>欢迎使用 ${WEBSITE_NAME}！</p>
      <p>1. 接受条款</p>
      <p>通过注册和使用本网站，即表示您同意遵守本协议的所有条款。</p>
      <p>2. 账号安全</p>
      <p>您有责任维护账号的安全性，包括但不限于：</p>
      <ul>
        <li>保护密码安全</li>
        <li>不与他人分享账号</li>
        <li>定期更新安全信息</li>
      </ul>
      <p>3. 使用规范</p>
      <p>您同意：</p>
      <ul>
        <li>遵守相关法律法规</li>
        <li>不发布违法或不当内容</li>
        <li>尊重他人知识产权</li>
      </ul>
    </div>
    `,
    '用户协议',
    {
      confirmButtonText: '我知道了',
      customClass: 'terms-dialog',
      dangerouslyUseHTMLString: true
    }
  );
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  ElMessageBox.alert(
    `
    <div class="terms-dialog-content">
      <h3>隐私政策</h3>
      <p>我们重视您的隐私保护。本政策说明了我们如何收集、使用和保护您的个人信息。</p>
      <p>1. 信息收集</p>
      <p>我们收集的信息包括：</p>
      <ul>
        <li>注册信息（邮箱地址）</li>
        <li>使用记录</li>
        <li>设备信息</li>
      </ul>
      <p>2. 信息使用</p>
      <p>我们使用这些信息：</p>
      <ul>
        <li>提供和改进服务</li>
        <li>保障账号安全</li>
        <li>发送服务通知</li>
      </ul>
      <p>3. 信息保护</p>
      <p>我们采取多种措施保护您的信息：</p>
      <ul>
        <li>数据加密存储</li>
        <li>访问权限控制</li>
        <li>定期安全审计</li>
      </ul>
    </div>
    `,
    '隐私政策',
    {
      confirmButtonText: '我知道了',
      customClass: 'terms-dialog',
      dangerouslyUseHTMLString: true
    }
  );
};
</script>

<style lang="scss" scoped>
.terms-container {
  margin: 12px 0;

  .terms-content {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--el-text-color-regular);

    .terms-text {
      margin: 0 4px;
    }

    .terms-link {
      padding: 0 2px;
      font-weight: 500;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

:deep(.el-checkbox__label) {
  font-size: 14px;
}

:deep(.el-checkbox__input) {
  margin-top: 2px;
}

:deep(.terms-dialog) {
  .el-message-box__content {
    max-height: 60vh;
    overflow-y: auto;
  }

  .terms-dialog-content {
    h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      text-align: center;
    }

    p {
      margin: 12px 0;
      line-height: 1.6;
    }

    ul {
      margin: 8px 0;
      padding-left: 20px;

      li {
        margin: 4px 0;
        line-height: 1.5;
      }
    }
  }
}
</style>
